import { Image, View } from "@tarojs/components";
import styles from "./index.scss";
import { Add } from "@nutui/icons-react-taro";
import SelectMaterial from "./selectMaterial";
import { useState } from "react";
import { getImgUrl } from "@/utils";

export default () => {
  const [list, setList] = useState([
    {
      name: "头饰",
    },
    {
      name: "衣服",
    },
    {
      name: "裤子",
    },
    {
      name: "鞋子",
    },
  ]);
  const [open, setOpen] = useState(false);
  const [currentItem,setCurrentItem] = useState();
  return (
    <View className={styles.container}>
      {list.map((item, index) => (
        <View
          key={index}
          className={styles.item}
          onClick={() => {
            setCurrentItem(index)
            setOpen(true);
          }}
        >
          {!!item?.value?.imgUrl ? (
            <Image
              className={styles.icon}
              src={getImgUrl(item?.value?.imgUrl)}
            />
          ) : (
            <View className={styles.icon}>
              {item.name}
              <Add />
            </View>
          )}
        </View>
      ))}
      <SelectMaterial
        open={open}
        value={list?.[currentItem]?.value || {}}
        onConfirm={(item) => {
          setOpen(false);
          setList(() => {
            const newList = [...list];
            newList[currentItem] = {
              ...newList[currentItem],
              value: item,
            };
            return newList;
          });
        }}
        onClose={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};
